﻿(function ($) {
    $.fn.tabPanelContainer = function (option) {
        option = $.extend({
            navSlt: ".header",
            contentSlt: ".content",
            maxitem: 0,
            application: null
        }, option);
        return this.each(function () {
            var view = $(this);
            var settings = $.extend({}, option);
            var helper = new $.tabPanelContainerHelper(view, settings);
            helper.init();
            view.helper("tabPanelContainer", helper);
        });
    };
    $.tabPanelContainerHelper = function (jo, settings) {
        this.jo = jo;
        this.settings = settings;
        var _this = this;
        this.nav = null;
        this.content = null;
        this.navitemwarp = null;
        this.tabList = new List();
        this.init = function () {
            if (this.settings.application != null) {
                this.settings.application.setTabPanelContainer(this);
            }
            this.jo.addClass("tabpanel");
            this.nav = this.jo.children(this.settings.navSlt);
            this.content = this.jo.children(this.settings.contentSlt);
            this.nav.attr("ratio", "#38").addClass("header");
            this.content.attr("ratio", "*").addClass("content");
            this.nav.html("<div class=\"left\" ratio=\"#17\"></div><div class=\"nav\" ratio=\"*\"><ul></ul></div><div class=\"right\" ratio=\"#17\"></div>");
            this.nav.horizontalSplitContainer();
            this.jo.verticalSplitContainer();
            this.navitemwarp = this.nav.children(".nav").children("ul");
            this.nav.children(".left").click(function () {
                _this.nav.children(".nav").animate({ scrollLeft: _this.nav.children(".nav").scrollLeft() - 100 });
            });
            this.nav.children(".right").click(function () {
                _this.nav.children(".nav").animate({ scrollLeft: _this.nav.children(".nav").scrollLeft() + 100 });
            });
            this.jo.layout(function () {
                _this.layout();
            });
            this.layout();
        };
        this.addTab = function (tabarg) {
            var index = this.tabList.exists(function (item) { return item.name == tabarg.name; });

            if (index !== false) {
                //this.selectTab(this.tabList.get(index).id);
                //this.refreshTab(this.tabList.get(index).id)
                this.removeTab(this.tabList.get(index).id);
                // return;
            }
            var content = $("<div style='height:100%;overflow:hidden'>");
            tab = $.extend({ application: this.settings.application, closeable: true }, tabarg);
            //            tab.onload = function () {
            //                content.verticalSplitContainer(); //特别添加
            //           };
            content.remotePanel(tab);
            this.content.append(content);
            var helper = content.helper("remotePanel");
            var html = '<li tabid="{id}"><a title="{title}" href="javascript:"><span>{title}</span></a><a class="close" href="javascript:;">close</a></li>';
            html = html.replace(/\{id\}/g, helper.getId())
                       .replace(/\{title\}/g, helper.getName());
            var navjo = $(html);
            if (tab.closeable) {
                navjo.children(".close").click(function () {
                    _this.removeTab(helper.getId());
                    return false;
                });
            } else {
                navjo.children(".close").hide();
            }
            navjo.click(function () {
                _this.selectTab(helper.getId());
                return false;
            });
            this.navitemwarp.append(navjo);
            this.tabList.push($.extend({ id: helper.getId(), nav: navjo, content: content, selected: false }, tabarg));
            this.selectTab(helper.getId());
            this.layout();
            this.selectTab(helper.getId());
            return helper.getId();
        };
        this.removeTab = function (tabid) {
            var o = this.tabList.first(function (item) { return item.id == tabid; });
            o.content.remove();
            o.nav.remove();
            this.tabList.remove(function (item) { return item.id == tabid; });
            var length = this.tabList.length();
            var newo = this.tabList.get(length - 1);
            if (newo != null) {
                this.selectTab(newo.id);
            }
            this.layout();
        };
        this.selectTab = function (tabid) {
            var oldo = this.tabList.first(function (item) { return item.selected });
            if (oldo != null) {

                oldo.content.hide();
                oldo.nav.removeClass("selected");
                oldo.selected = false;
            }
            var o = this.tabList.first(function (item) { return item.id == tabid; });
            var index = this.tabList.getIndex(function (item) { return item.id == tabid; });
            o.content.show();
            o.nav.addClass("selected");
            o.nav.find("a").blur();
            var scrollleft = this.nav.children(".nav").scrollLeft();
            var oleft = o.nav.position().left;

            if (scrollleft > oleft) {
                this.nav.children(".nav").animate({ scrollLeft: oleft });
            } else if (oleft + o.nav.outerWidth() > scrollleft + this.nav.children(".nav").width()) {
                this.nav.children(".nav").animate({ scrollLeft: oleft - this.nav.children(".nav").width() + o.nav.outerWidth() });
            }
            o.selected = true;
            this.tabList.moveToTop(index);
            this.jo.layout();
        };
        this.refreshTab = function (tabid) {

            var o = this.tabList.first(function (item) { return item.id == tabid; });
            o.content.helper("remotePanel").reload();
        };
        this.layout = function () {
            var items = this.navitemwarp.children();
            var w = 0;
            items.each(function () {
                w += $(this).outerWidth();
            });
            this.navitemwarp.width(w + 100);
            if (w > this.nav.width()) {
                this._showleftright();
            } else {
                this._hideleftright();
            }
        };
        this._hideleftright = function () {
            this.nav.children(".left,.right").attr("ratio", "#0").hide();
            this.nav.helper("horizontalSplitContainer").layout();
        };
        this._showleftright = function () {
            this.nav.children(".left,.right").attr("ratio", "#17").show();
            this.nav.helper("horizontalSplitContainer").layout();
        };
    };

})(jQuery);